import React from 'react'

const Index = () =>
{
    // 初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    // 获取cookie
    let Cookie = React.$Cookies.load('LoginUser',{path:'/'}) ? JSON.parse(React.$Cookies.load('LoginUser',{path:'/'})) : {}

    // 状态
    const listRef = React.useRef(null)
    const [list,setList] = React.useState([])
    const [finished,setFinished] = React.useState(false)
    const [LoginUser,setLoginUser] = React.useState(Cookie)

    let data = []

    // 定义分页的值，可以每次拿到最新
    let page = React.useRef(1)

    // 选中选项的状态
    let status = React.useRef(0)

    // 定义选项卡的数据
    const statuslist = [
        {
            id:0,
            name:'全部',
        },
        {
            id:1,
            name:'已下单',
        },
        {
            id:2,
            name:'已发货',
        },
        {
            id:3,
            name:'已收货',
        },
        {
            id:4,
            name:'已归还',
        },
        {
            id:5,
            name:'已退押金',
        },
        {
            id:6,
            name:'已完成',
        },
    ]

    // 请求数据
    const getLeaseData = async () =>
    {
        let Data = {
            page:page.current,
            status:status.current,
            busid:LoginUser.id
        }

        let result = await React.$Api.LeaseIndex(Data)

        if(result)
        {
            if(result.code === 1)
            {

                data = data.concat(result.data)
                
                setList(data)
                
                page.current = page.current + 1

                
            }else{
                setFinished(true)
                React.$Vant.Toast.info(result.msg)
                return false
            }
        }

    }

    // 确认收货
    const ConfirmLease = (id) =>
    {
        React.$Vant.Dialog.confirm({
            title:'确认收货',
            message:'是否确认该订单已收货？'
        }).then(async (res) => {
            let result = await React.$Api.LeaseReceipt({id:id})

            if(result.code === 1)
            {
                React.$Vant.Notify.show({
                    type:'success',
                    message:result.msg,
                    onClose:() => {
                        data = []
                        setList([])
                        page.current = 1
                        getLeaseData()
                    }
                })

                return false
            }else{
                React.$Vant.Notify.show({
                    type:'warning',
                    message:result.msg,
                })

                return false
            }

        }).catch((err) => {
            console.log(err)
        })
    }

    const Items = () =>
    {
        return list.map((item, key) => {
            return (
                <li key={key}>
                    <div className="vip_order_goods">
                        <h3>
                            <i><img src={item.product.cover_cdn} /></i>
                            <dl>
                                <dt>{item.product.name}</dt>
                                <dd>
                                    <em>押金</em>
                                    <em>{item.rent}</em>
                                </dd>
                                <dd>
                                    <em>总价</em>
                                    <em>{item.price}</em>
                                </dd>
                                <dd>
                                    <em>结束时间</em>
                                    <em>{item.endtime_text}</em>
                                </dd>
                                <dd>
                                    <em>订单状态</em>
                                    <em>{item.status_text}</em>
                                </dd>
                            </dl>
                        </h3>
                    </div>

                    <div className="order_btn">

                        {(item.status == 5) && <React.$Vant.Button round type="warning" size="small" onClick={() => navigate(`/lease/lease/comment?id=${item.id}`)}>订单评价</React.$Vant.Button>}

                        {(item.status == 3 || item.status == 4) && <React.$Vant.Button round type="danger" size="small" onClick={() => navigate(`/lease/lease/recovery?id=${item.id}`)}>归还商品</React.$Vant.Button>}

                        {item.status == 2 && <React.$Vant.Button round type="warning" size="small" onClick={ConfirmLease.bind(this, item.id)}>确认收货</React.$Vant.Button>}

                        {item.status >= 2 && <React.$Vant.Button round type="info" size="small" onClick={() => navigate(`/lease/lease/express?id=${item.id}`)}>查看物流</React.$Vant.Button>}

                        <React.$Vant.Button round type="primary" size="small" onClick={() => navigate(`/lease/lease/info?id=${item.id}`)}>查看详情</React.$Vant.Button>
                    </div>
                </li>
            )
        })
    }

    const refresh = async () =>
    {
        data = []
        setList([])
        page.current = 1

        return new Promise((resolve) => {
            setTimeout(() => {
                getLeaseData()
                React.$Vant.Toast.info('刷新成功')
                resolve(true)
            }, 1000);
        })
    }

    const load = async () =>
    {
        setFinished(true)
        getLeaseData()
    }

    const TabsChange = (val) =>
    {
        data = []
        setList([])
        page.current = 1
        status.current = val.name

        getLeaseData()

    }

    const onBack = () =>
    {
        navigate('/user/base/index')
    }

    return (
        <>
            {/* 导航栏 */}
            <React.$Vant.Sticky>
                <React.$Vant.NavBar
                title="订单列表"
                onClickLeft={onBack}
                zIndex="10"
                />
            </React.$Vant.Sticky>

            {/* 选项卡 */}
            <React.$Vant.Tabs onClickTab={TabsChange}>
                {statuslist.map((item, key) => {
                return (
                    <React.$Vant.Tabs.TabPane key={item.id} title={item.name} />
                )
                })}
            </React.$Vant.Tabs>

            {/* 列表 */}
            <React.$Vant.PullRefresh onRefresh={refresh} onRefreshEnd={() => listRef.current?.check()}>
                <React.$Vant.List className="vip_user_order" ref={listRef} onLoad={load} offset={5} finished={finished}>
                <ul>
                    {Items()}
                </ul>
                </React.$Vant.List>
            </React.$Vant.PullRefresh>
        </>
    )
}

export default Index